import Taro, { Component } from '@tarojs/taro'
import { View, Text, ScrollView, Image } from '@tarojs/components'
import './index.scss'
import { connect } from '@tarojs/redux'
import * as actions from '@actions/comment'
import classNames from 'classnames'
import { split } from '@utils/utils'

@connect(state => state.comment, { ...actions })
export default class CommentItem extends Taro.Component {
    constructor(props) {
        super(props)
        this.prodId = this.$router.params.prodId
    }

    componentDidMount() {
        this.props.dispatchCommentProd({ prodId: this.prodId })
        this.props.dispatchCommentProdPage({
            prodId: this.prodId,
            size: 10,
            current: this.state.current + 1,
            evaluate: this.state.evaluate
        }).then(res => {
            this.setState({
                loaded: true,
                current: res.current + 1
            })
        })
    }
    getProdCommPage(evaluate) {
        this.setState({
            evaluate: evaluate
        })
        this.props.dispatchCommentProdPage({
            prodId: this.prodId,
            size: 10,
            current: this.state.current + 1,
            evaluate: this.state.evaluate
        }).then(res => {
            this.setState({
                loaded: true,
                current: res.current + 1
            })
        })
    }
    state = {
        loaded: false,
        loading: false,
        current: 0,
        evaluate: -1
    }
    img(imgs) {
        const img = (split(imgs) || []).map(item => {
            return (
                <Image className="image" src={item} />
            )
        })
        return (
            <ScrollView className="cmt-attr" scrollX>
                {
                    img
                }
            </ScrollView>
        )
    }
    item(item) {
        return (
            <View className="cmt-item" key="prodCommId">
                <View className="cmt-user">
                    <Text className="date">{item.recTime}</Text>
                    <View className="cmt-user-info">
                        <Image className="user-img" src={item.pic} />
                        <View className="nickname">{item.nickName}</View>
                        {/* <van-rate readonly value="{{ item.score }}" change="onChange" color="#f44" /> */}
                    </View>
                </View>
                <View className="cmt-cnt">{item.content}</View>
                {
                    this.img(item.pics)
                }
                <View className="cmt-reply">
                    <Text className='reply-tit'>店铺回复：{item.replyContent}</Text>
                </View>
            </View>
        )
    }

    commentList(list) {
        const comment = (list || []).map(item => {
            return this.item(item)
        })

        return (
            <View className="cmt-items">
                {
                    comment
                }
            </View>
        )
    }
    closePopup() {
        Taro.navigateBack({
            delta: 1
        })
    }
    render() {
        const { loaded, evaluate } = this.state
        const { prodCommPage, prodCommData } = this.props
        console.log(prodCommPage)
        return (
            // < !--评价弹窗 -- >
            <View>
                {loaded &&
                    <View className="cmt-popup">
                        <View className="cmt-tit">
                            <View className="cmt-t">
                                商品评价
                                <Text className="cmt-good">好评度{prodCommData.positiveRating}%</Text>
                            </View>
                            <Text className="close" onClick={() => this.closePopup()}></Text>
                        </View>
                        <View className="cmt-cont">
                            <View className="cmt-tag">
                                <Text onClick={() => this.getProdCommPage(-1)} className={classNames('text', evaluate === -1 && 'selected text')}>全部({prodCommData.number})</Text>
                                <Text onClick={() => this.getProdCommPage(0)} className={classNames('text', evaluate === 0 && 'selected text')}>好评({prodCommData.praiseNumber})</Text>
                                <Text onClick={() => this.getProdCommPage(1)} className={classNames('text', evaluate === 1 && 'selected text')}>中评({prodCommData.secondaryNumber})</Text>
                                <Text onClick={() => this.getProdCommPage(2)} className={classNames('text', evaluate === 2 && ' selected text')}>差评({prodCommData.negativeNumber})</Text>
                                <Text onClick={() => this.getProdCommPage(3)} className={classNames('text', evaluate === 3 && ' selected text')}>有图({prodCommData.picNumber})</Text>
                            </View>
                            {
                                this.commentList(prodCommPage.records)
                            }
                            {prodCommPage.pages > prodCommPage.current &&
                                <View className="load-more">
                                    <Text bindtap='getMoreCommPage'>点击加载更多</Text>
                                </View>
                            }

                        </View>
                    </View>
                }
            </View>

        )
    }
}